<script setup lang="ts">
import OrderCallConfig from '@/pages/mobileOrdering/serviceConfig/components/OrderCallConfig.vue'
import TableConfig from '@/pages/mobileOrdering/serviceConfig/components/TableConfig.vue'
import TableNumberConfig from '@/pages/mobileOrdering/serviceConfig/components/TableNumberConfig.vue'

const formData = ref({
  type: 1,
})
function handleClickLeft() {
  uni.navigateBack()
}
const typeList = [
  {
    name: '桌台点餐',
    value: 1,
    desc: '顾客用手机扫桌台上的点餐码即可开始点餐，收银机接单后，开始制作菜品，然后由服务员送至桌台。',
  },
  {
    name: '牌号送餐',
    value: 2,
    desc: '顾客用手机扫牌卡上的点餐码即可开始点餐，点餐后进行支付，收银机接单后，开始制作菜品，由服务员按牌卡号送至顾客就做的位置。',
  },
  {
    name: '叫号取餐',
    value: 3,
    desc: '顾客用手机扫牌卡上的点餐码即可开始点餐，点餐后进行支付，收银机接单后，开始制作菜品，通过叫号的方式顾客自行取餐。',
  },
]
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="业务配置" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view
      scroll-y
      class="box-border flex-1 overflow-hidden p-[10px]"
      :show-scrollbar="false"
    >
      <wd-form :model="formData">
        <view class="rounded-lg bg-white">
          <view class="px-[15px] py-[10px]">
            <wd-text text="点餐模式设置" size="14px" color="#333" />
          </view>
          <custom-wd-input-single-select
            v-model="formData.type"
            label="点餐模式"
            placeholder="请选择"
            placeholder-class="text-align-right"
            custom-input-class="text-align-right"
            :list="typeList"
          />
        </view>
        <table-config v-if="formData.type === 1" class="mt-3" />
        <table-number-config v-if="formData.type === 2" class="mt-3" />
        <order-call-config v-if="formData.type === 3" class="mt-3" />
        <view class="mt-3 rounded-lg bg-white">
          <view class="px-[15px] py-[10px]">
            <wd-text text="点餐时段" size="14px" color="#333" />
          </view>
          <wd-cell-group border>
            <wd-cell title="线上点餐可用时段" title-width="35%" center>
              <view class="inline-flex flex-col">
                <wd-text text="与门店营业时间一致" size="14px" color="#333" />
                <wd-text text="如需调整营业时间，请在门店档案中设置" size="12px" />
              </view>
            </wd-cell>
            <wd-cell title="非营业时间线上扫码点餐" class="no-leading" title-width="70%">
              <wd-switch size="20px" />
              <template #label>
                <wd-text
                  text="开启后，门店的非营业时间内，顾客扫门店点餐码、桌台点餐码、门店主页码仍可下单"
                  size="12px"
                />
              </template>
            </wd-cell>
          </wd-cell-group>
        </view>
        <view class="mt-3 rounded-lg bg-white">
          <view class="px-[15px] py-[10px]">
            <wd-text text="其他设置" size="14px" color="#333" />
          </view>
          <wd-cell-group border>
            <wd-cell title="就餐方式" title-width="33%" center>
              <wd-radio-group shape="button" size="small">
                <wd-radio :value="1">堂食</wd-radio>
                <wd-radio :value="2">堂食或整单外带</wd-radio>
              </wd-radio-group>
            </wd-cell>
            <wd-cell title="堂食可选择部分菜品外带" title-width="70%">
              <wd-switch size="20px" />
            </wd-cell>
          </wd-cell-group>
        </view>
      </wd-form>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="primary" :round="false" class="flex-1">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-cell__title) {
  color: #676869;
}
:deep(.wd-input__label) {
  color: #676869;
}
:deep(.no-leading.wd-cell) {
  line-height: 18px;
}
</style>
